<template>
	<view class="content">
		<!-- 导航栏 -->
		<Navtop>
			<template v-slot:center>
				<view class="center">
					工作台
				</view>
			</template>
			<template v-slot:footer>
				<view class="san">
					<uni-icons type="search" size="20"></uni-icons>
				</view>
			</template>
		</Navtop>
		<!-- 图标栏 -->
		<view class="icons">
			<view class="icon" v-for="(item, a) in icons" :key="a">
				<navigator :url="item.url">
					<svg class='icon logo' aria-hidden='true' >
						<use v-bind:xlink:href='item.icon'></use>
					</svg>
					<!-- <image class="" :src="item.icon"></image> -->
					<view class="icontitle">{{ item.title }}</view>
				</navigator>
			</view>
		</view>
		<!-- 下拉菜单栏 -->


		<!-- <dropto /> -->
		<view class="drop">
			<navigator url="/components/components/power" hover-class="navigator-hover" class="drleft">
				<svg class='icon' aria-hidden='true' >
					<use xlink:href='#icon-standard'></use>
				</svg>
				<view class="power">权限内∨</view>
			</navigator>
			<navigator url="/components/components/power" hover-class="navigator-hover"  class="drright">
				<view class="time">2021年9月</view>
			</navigator>
		</view>
		<!-- <Suspense> -->
		<!-- 简报看板 -->
		<jianbao />
		<!-- </Suspense> -->
		<!-- 合同订单 没有请求数据-->
		<!-- <Hetong /> -->
		<!-- 回款 请求数据报错-->
		<Huikuan />
		<!-- 应收款 -->
		<!-- <Yingshou /> -->
		<!-- 客户 -->
		<Kehu />
		<!-- 机会 -->
		<Jihui />
		<!-- 查看更多统计 -->
		
		
		<navigator url="/components/components/Tongjitubiao" hover-class="navigator-hover" class="down">
			<view class="downtext">
				查看更多统计<uni-icons type="arrowright" size="16" color="#CFB53B"></uni-icons>
			</view>
		</navigator>
		<!-- 底部 -->
		<view class="height">
			
		</view>
	</view>
</template>

<script>
// import Dropto from '@/components/components/Dropto.vue';
import Jianbao from '@/components/components/Jianbao.vue';
import Hetong from '@/components/components/Hetong.vue';
import Huikuan from '@/components/components/Huikuan.vue';
import Yingshou from '@/components/components/Yingshou.vue';
import Kehu from '@/components/components/Kehu.vue';
import Jihui from '@/components/components/Jihui.vue';
import Navtop from "@/components/common/Navtop/Navtop.vue"

import { ref, reactive } from 'vue';

export default {
	components: {
		Jianbao,
		Hetong,
		Huikuan,
		Yingshou,
		Kehu,
		Jihui,
		Navtop
	},
	props: {
		componentName: ''
	},


	
	setup() {
		// 图标栏
		const icons = reactive([
			{
				title: '客户资料',
				icon: '#icon-supplier',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '任务/跟进',
				icon: '#icon-task',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '销售机会',
				icon: '#icon-store',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '报价记录',
				icon: '#icon-price',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '合同订单',
				icon: '#icon-contract',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '回款记录',
				icon: '#icon-p-refund',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '发货单',
				icon: '#icon-shipment',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '产品信息',
				icon: '#icon-product-c',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '数据审核',
				icon: '#icon-businessInformation',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '费用报销',
				icon: '#icon-e-reimbursement',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '日/周/月报',
				icon: '#icon-daily',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			},
			{
				title: '全部',
				icon: '#icon-project',
				url:"/pages/index/Commonlist/Kehulist/Kehulist"
			}
		]);
		
		const get = () => {
			console.log('apiPath');
			
			uni.request({
				url: 'http://nboa.jzsoft.cn:777/pro/api/user/login?entno=jzcs&loginname=admin&loginpass=admin', //登录接口
				method: 'GET',
				header: {
					'content-type': 'application/json'
				},
				success: res => {
					console.log(res);
				}
			});
		};
get()

		return {
			icons,
		};
	}
};
</script>

<style scoped lang="scss">
.content {
	// 导航栏
	.navbar {
		background-color: $uni-text-color-inverse;
		margin-top: 44rpx;
	}

	// 图标栏
	.icons {
		background-color: $uni-text-color-inverse;
		height: 336*2rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 24 * 2rpx 24 * 2rpx 24 * 2rpx;
		border-bottom: 8 * 2rpx solid #F2F2F7;
		margin: 0rpx 0 0 0;
		.icon {
			width: 24%;
			height: 70 * 2rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 24rpx 0;
			.logo {
				height: 96rpx;
				width: 48 * 2rpx;
			}
			.icontitle {
				font-size: 12 * 2rpx;
				line-height: 17 * 2rpx;
				margin-top: 5 * 2rpx;
				text-align: center;
			}
		}
	}
	// 下拉菜单栏
	.drop {
		background-color: $uni-text-color-inverse;
		height: 56 * 2rpx;
		border-bottom: 8 * 2rpx solid #F2F2F7;
		padding: 0 16 * 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.drleft {
			display: flex;
			align-items: center;
			width: 300rpx;
			.icon {
				width: 30 * 2rpx;
				height: 30 * 2rpx;
				border-radius: 5 * 2rpx;
			}
			.power{
				width: 300rpx;
				margin-left: 5rpx;
			}
		}
		.drright {
			display: flex;
		}
	}
	.height{
		height: 50*2rpx;
	}
}
// 最下方的入口,查看更多统计
.down{
	background-color: $uni-text-color-inverse;
	border-top: 8*2rpx solid #F2F2F7;
	border-bottom: 8*2rpx solid #F2F2F7;
	.downtext{
		font-size: 16px;
		line-height: 20px;
		/* identical to box height */
		padding: 8*2rpx;
		text-align: center;
		
		color: #CFB53B;
	}
}

</style>
